<template>
  <div v-loading="loading" class="problem-detail">
    <template v-if="problem">
      <div class="problem-header">
        <h1 class="problem-title">{{ problem.title }}</h1>
        <div class="problem-meta">
          <el-tag size="small" effect="plain">时间限制：{{ problem.time_limit }}ms</el-tag>
          <el-tag size="small" effect="plain">内存限制：{{ problem.memory_limit }}MB</el-tag>
          <el-tag 
            :type="getDifficultyType(problem.difficulty)"
            size="small"
            effect="plain"
          >
            {{ DIFFICULTY_MAP[problem.difficulty] }}
          </el-tag>
          <el-tag type="info" size="small" effect="plain">
            {{ problem.source }}
          </el-tag>
        </div>
        <div class="problem-stats">
          <el-tooltip content="通过率" placement="top">
            <span class="stat-item">
              <el-icon><CircleCheck /></el-icon>
              {{ problem.pass_rate.toFixed(2) }}%
            </span>
          </el-tooltip>
          <el-tooltip content="提交次数" placement="top">
            <span class="stat-item">
              <el-icon><Document /></el-icon>
              {{ problem.total_submissions }}
            </span>
          </el-tooltip>
          <el-tooltip content="通过次数" placement="top">
            <span class="stat-item">
              <el-icon><Select /></el-icon>
              {{ problem.accepted_submissions }}
            </span>
          </el-tooltip>
        </div>
      </div>

      <el-tabs class="problem-content" v-model="activeTab">
        <el-tab-pane label="题目描述" name="description">
          <div class="problem-section">
            <div class="section-content">
              <markdown-renderer :content="problem.problem_description" />
            </div>
          </div>

          <div class="problem-section">
            <h3>输入格式</h3>
            <div class="section-content">
              <markdown-renderer :content="problem.input_description" />
            </div>
          </div>

          <div class="problem-section">
            <h3>输出格式</h3>
            <div class="section-content">
              <markdown-renderer :content="problem.output_description" />
            </div>
          </div>

          <div class="problem-section">
            <h3>示例</h3>
            <div class="section-content">
              <div v-for="(example, index) in problem.samples" :key="index" class="example">
                <div class="example-input">
                  <h4>输入示例 {{ index + 1 }}</h4>
                  <pre>{{ example.input }}</pre>
                </div>
                <div class="example-output">
                  <h4>输出示例 {{ index + 1 }}</h4>
                  <pre>{{ example.output }}</pre>
                </div>
                <div v-if="example.explanation" class="example-explanation">
                  <h4>解释</h4>
                  <div class="markdown-body" v-html="example.explanation"></div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="提交记录" name="submissions">
          <submission-history :problem="problemId" />
        </el-tab-pane>
      </el-tabs>

      <!-- 代码编辑器 -->
      <code-editor 
        :problem-id="problemId"
        @submission-created="handleSubmissionCreated"
      />
    </template>

    <el-empty v-else description="题目不存在" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { CircleCheck, Document, Select } from '@element-plus/icons-vue'
import CodeEditor from './CodeEditor.vue'
import SubmissionHistory from './SubmissionHistory.vue'
import MarkdownRenderer from './MarkdownRenderer.vue'
import problemApi from '@/api/problem'
import type { Problem } from '@/api/problem'
import type { SubmissionResult } from '@/api/code'

const DIFFICULTY_MAP = {
  'Easy': '简单',
  'Medium': '中等',
  'Hard': '困难'
}

const route = useRoute()
const router = useRouter()
const problemId = Number(route.params.id)
const problem = ref<Problem | null>(null)
const loading = ref(false)
const activeTab = ref('description')

// 获取题目难度对应的标签类型
const getDifficultyType = (difficulty: string) => {
  const types = {
    'Easy': 'success',
    'Medium': 'warning',
    'Hard': 'danger'
  }
  return types[difficulty as keyof typeof types] || 'info'
}

// 获取题目详情
const fetchProblem = async () => {
  loading.value = true
  try {
    const response = await problemApi.getDetail(problemId)
    problem.value = response
    console.log(problem.value)
  } catch (error: any) {
    console.error('Fetch problem error:', error)
    ElMessage.error(error.message || '获取题目失败')
  } finally {
    loading.value = false
  }
}

// 处理提交创建成功
const handleSubmissionCreated = (submission: SubmissionResult) => {
  // 切换到提交记录标签页
  activeTab.value = 'submissions'
  // 可以在这里添加其他逻辑，比如显示提示信息等
}

onMounted(() => {
  if (isNaN(problemId)) {
    ElMessage.error('无效的题目ID')
    router.push('/problem-list')
    return
  }
  fetchProblem()
})
</script>

<style scoped>
.problem-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.problem-header {
  margin-bottom: 24px;
}

.problem-title {
  font-size: 24px;
  margin: 0 0 16px;
}

.problem-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.problem-stats {
  display: flex;
  gap: 24px;
  color: #666;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.problem-content {
  margin-bottom: 24px;
}

.problem-section {
  margin-bottom: 24px;
}

.problem-section h3 {
  font-size: 18px;
  margin: 0 0 12px;
  color: #333;
}

.section-content {
  color: #444;
  line-height: 1.6;
}

.example {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.example:last-child {
  margin-bottom: 0;
}

.example h4 {
  margin: 0 0 8px;
  color: #333;
}

.example pre {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
}

.example-explanation {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #ddd;
}

:deep(.el-tabs__nav) {
  margin-bottom: 20px;
}

:deep(.markdown-body) {
  background: none;
  padding: 0;
}

:deep(.markdown-body pre) {
  background: #f5f7fa;
}
</style>
